<template>
    <div class="page-container">
        <div class="page-wrapper" :style=" { height:'560px', backgroundImage:`url(${bgImg})` }">
            <div class="page-content">
                <div class="text-container">
                    <div class="text">华翊产品</div>
                    <div class="sub-text" style="margin:36px 0;">应用、算法、服务、硬件 独立交付、灵活配置</div>
                    <el-button size="large" color="#335CFF" @click="handleClick">立即试用</el-button>
                </div>
            </div>
        </div>
        <div class="page-wrapper" :style="{ height:'auto', position:'relative', background: type === 'hardware' ? '#fff' : '#f5f7fa' }">
            <div class="page-content">
                <div class="float-tabs">
                    <div
                        v-for="item in tabs"
                        :key="item.key"
                        :class="{ 'float-item':true, 'selected':item.key === current }"
                        @click="current = item.key"
                    >
                        {{ item.label }}
                    </div>
                </div>
                <EquipmentDetail v-if="type === 'hardware'" :id="id" :tab="current" />
                <div v-else class="app-detail-wrapper">
                    <!-- 应用轮播组件 -->
                    <div v-if="current === 'intro' && scrollList.length " class="app-detail-scroll">
                        <el-carousel height="360px" :autoplay="false"
							:interval="5000" :arrow=" scrollList.length > 1 ? 'always' : 'never' ">
							<el-carousel-item v-for="(item, index) in scrollList" :key="index">
								<video v-if="item.type === 'video'" controls
									style="width:100%; height:100%; ">
									<source
										:src="`${getFullPath(item.src)}`">
								</video>
                                <div v-else :style="{
                                    width:'100%',
                                    height:'360px',
                                    backgroundRepeat:'no-repeat',
                                    backgroundImage:`url(${getFullPath(item.src)})`,
                                    backgroundSize:'contain',
                                    backgroundPosition:'50% 0'
                                }">
								</div>
							</el-carousel-item>
						</el-carousel>
                    </div>
                    <!-- 应用简介 -->
                    <div v-if="current === 'intro'" class="app-detail-desc">
                        {{ sourceData[type + 'Intro'] || '' }}
                    </div>
                    <!-- 是否支持本地部署 -->
                    <div v-if="sourceData.supportStatus && current === 'intro' && type === 'app' " style="font-size:20px; line-height:20px; margin:24px 0; ">
                        <div><span>是否支持本地化部署：</span><span style="color:#335CFF;">支持</span></div>
                    </div>
                    <div v-if="current === 'intro'" style="font-weight:bold; margin:24px 0; ">{{  sourceData[type + 'Name'] || '' }}</div>
                    <!-- 应用版本信息 -->
                    <div v-if="current === 'intro' && type === 'app' " class="app-detail-version">
                        <div><span style="margin-right:6px;">版本</span><span>{{ ( versionList[0] || {} ).versionNumber || '--' }}</span></div>
                        <!-- <el-timeline v-if="versionList.length">
							<el-timeline-item v-for="(item, index) in versionList" :key="item.id">
								<template #default>
									<div style="text-align:left; margin-bottom:1rem; ">
										<div style="margin-bottom:1rem;">
											<span
												style=" font-size:1.2rem; line-height:1.2rem; font-weight:bold; color:#000; margin-right:1rem;">{{ '版本 ' + item.versionNumber }}</span>
											<span
												style=" color:rgba(0, 0, 0, 0.45);">{{ item.updateTime }}</span>
										</div>
										<div style="text-align:left;">
											<div v-for="(sub, j) in item.versionDetail.split('\n')"
												:key="j">{{ sub }}</div>
										</div>
									</div>
								</template>
							</el-timeline-item>
						</el-timeline> -->
					</div>
                    <!-- 应用富文本自定义详情 -->
                    <div class="app-detail-content" style="margin:36px 0;" v-html="sourceData[type + 'Detail']"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import { watch, reactive, ref, computed, onMounted } from 'vue';
    import { useRoute } from 'vue-router';
    import { getFullPath, getAppDetail, getVersionList, getServiceDetail, markAction } from '@/api/global.js';
    import EquipmentDetail from './EquipmentDetail.vue';
    import bgImg from '../../../public/product-bg.jpg';
    const tabs = [{ label:'简介', key:'intro'}, { label:'详情', key:'desc'}];
    const current = ref('intro');
    const sourceData = ref({});
    const route = useRoute();
    const type = route.query.type;
    const id = route.query.id;
    const scrollList = computed(() => {
		let imgList = sourceData.value.introImgs && sourceData.value.introImgs.length ? sourceData.value.introImgs.split(',').filter(
			i => i).map(i => ({
			type: 'img',
			src: i
		})) : [];
		let videoList = sourceData.value.introVideo && sourceData.value.introVideo.length ? sourceData.value.introVideo.split(',')
			.filter(i => i).map(i => ({
				type: 'video',
				src: i
			})) : [];
		return [...imgList, ...videoList];
	});
    const versionList = ref([]);
    const handleClick = ()=>{
        markAction({ operationType:'进入厂务' });
        window.open('http://iot.ifmcs.com', '__blank');
    }
    const fetchDetailInfo = ()=>{
        if ( type === 'app') {
            getAppDetail({ id })
            .then(res=>{
                if ( res.data.code === 200 ) {
                    sourceData.value = res.data.data;
                    fetchVersionList( res.data.data.appCode )
                }
            })
        } else if ( type === 'service' ) {
            getServiceDetail({ id })
            .then(res=>{
                if ( res.data.code === 200 ) {
                    sourceData.value = res.data.data;
                }
            })
        }
    }
    const fetchVersionList = (appCode )=>{
        getVersionList({ appCode })
        .then(res=>{
            if ( res.data.code === 200 ){
                versionList.value = res.data.data;
            }
        })
    }
    onMounted(()=>{
        fetchDetailInfo();
    })
    
</script>
<style >
    
    .card .card-footer > .tag {
        display:inline-block;
        border-radius:4px;
        border:1px solid #99A0AE;
        font-size:12px;
        line-height:18px;
        padding:2px 8px;
        color:#99A0AE;
    }

    .float-tabs {
        width:100%;
        height:80px;
        line-height:80px;
        font-size:16px;
        background:#fff;
        transform:translateY(-50%);
        border-radius:8px;
        text-align: center;
        box-shadow: 0px 2px 10px 6px rgb(57, 58, 63, 0.15);
    }
    .float-tabs .float-item {
        display:inline-block;
        margin:0 60px;
        color:rgba(0, 0, 0, 0.65);
        position:relative;
        transition:all 0.3s;
        cursor: pointer;
    }
    .float-item.selected {
        color:#335cff;
    }
    .float-item.selected::after {
        content:'';
        position:absolute;
        height:2px;
        background:#335CFF;
        width:46px;
        left:50%;
        bottom:0;
        transform:translateX(-50%);
    }
    .app-detail-wrapper {
        width:920px;
        height:100%;
        margin:0 auto;
        min-height:1000px;
        text-align:center;
        color:#242424;
        font-size:20px;
        text-align:left;
    }
    .app-detail-scroll {
        height:360px;
        margin-bottom:36px;
    }
    .app-detail-desc {
        line-height:30px;
        margin-top:36px;
        text-align:left;
    }
    .app-detail-content {
        text-align:center;
    }
    .app-detail-content img {
        width:100%;
    }
</style>